


        main .headPic{
            padding-bottom: 130px;
            width: 1600px;
            margin: 0px auto;
            position: relative;
            z-index: 4;
            overflow: hidden;
        }
        main .headPic .contn{
            position: relative;
        }
        main .headPic .pic img{
            display: block;
        }
        main .headPic .pic:before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: 2;
        }
        main .headPic .pic.btm:before{
            background: rgba(0,0,0,.2);
        }
        main .headPic .shadow{
            position: absolute;
            width: 100%;
            padding-bottom: 50%;
            top: 0px;
            left: 0px;
            z-index: 2;
        }
        main .headPic .shadow .cut{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            clip-path: polygon(0% 0%, 25% 0%,50% 50%, 75% 0%, 100% 0%,50% 100%);
            background: rgba(255,255,255,.5);
        }
        main .headPic .shadow .arrow{
            width: 280px;
            height: 280px;
            transform-origin: 260px 260px;
            transform: translate(20px,20px) rotate(45deg);
        }
        main .headPic .shadow .arrow span:first-child{
            height: 20px;
        }
        main .headPic .shadow .arrow span:last-child{
            width: 20px;
        }
        main .headPic .t{
            width: 100%;
            transform: translateY(100px);
            text-align: center;
            font-weight: bold;
            font-size: 72px;
            z-index: 3;
            color: #fff;
            position: absolute;
            opacity: 0;
            transition: transform .8s,opacity .8s;
            transition-delay: 15ms;
        }
        main .headPic .t.frozen{
            opacity: 1;
            transform: translateY(0px);
        }

        main .tips{
            position: relative;
            z-index: 3;
            margin-top: -230px;
            padding-bottom: 1200px;
            clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 50vw + 17px / 2),50% 100%,0% calc(100% - 50vw + 17px / 2));
        }
        main .tips>img{
            z-index: 0;
        }
        main .tips::after{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            background: #fff;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: .88;
        }
        main .tips .art{
            padding-bottom: 100px;
            position: relative;
        }
        main .tips .art .content{
            min-height: 460px;
            box-sizing: content-box;
            padding-top: 278px;
            padding-bottom: 448px;
            position: relative;
            z-index: 3;
        }
        main .tips .art .content:after,
        main .tips .art .content:before{
            content: '';
            position: absolute;
        }
        main .tips .art .content:before{
            content: '';
            width: 2000px;
            height: 1400px;
            background: url(../img/triangle.png) no-repeat center bottom;
            bottom: 30px;
            z-index: -1;
            left: calc(50% - 1000px);
        }
        main .tips .art .content:after{
            content: '';
            width: 320px;
            height: 320px;
            background: #c7bea0;
            left: calc(50% - 160px);
            transform: rotate(45deg);
            bottom: 80px;
            z-index: -2;
            opacity: 0;
            margin-bottom: 100px;
            transition: opacity .8s,margin-bottom .8s;
        }
        main .tips .art .content.frozen:after{
            margin-bottom: 0px;
            opacity: 1;
        }
        main .tips .art .content .inner{
            max-width: 700px;
            padding: 0px 2%;
            margin: 0 auto;
        }
        main .inner{
            transition: transform .8s,opacity .8s;
            opacity: 0;
            transform: translateY(100px);
            text-align: center;
        }
        main .inner.frozen{
            opacity: 1;
            transform: translateY(0px);
        }
        main .hTtl{
            position: relative;
            font-size: 52px;
            line-height: 1.2;
            font-weight: bold;
        }
        main .hTtl + .t{
            font-size: 18px;
            color: #333;
            line-height: 1.5;
        }
        main .hTtl:before,
        main .hTtl:after,
        main .hTtl span:after{
            content: '';
            position: absolute;
            top: 0px;
            width: 9px;
            height: 9px;
            border: 2px solid #bdb297;
            left: calc(50% - 8px);
            transform: rotate(45deg);
            transition: transform .5s .6s;
        }
        main .meaning .hTtl:before,
        main .meaning .hTtl:after,
        main .meaning .hTtl span:after{
            display: none;
        }
        main .team .hTtl:before,
        main .team .hTtl:after,
        main .team .hTtl span:after{
            top: auto;
            bottom: 0px;
        }
        main .frozen .hTtl:before{
            transform: translateX(-10px) rotate(45deg);
        }
        main .frozen .hTtl:after{
            transform: translateX(10px) rotate(45deg);
        }
        main .tips .art .hTtl{
            padding-top: 58px;
            font-size: 42px;
            padding-bottom: 30px;
        }
        main .tips .meaning .hTtl{
            padding-bottom: 40px;
        }
        main .tips .meaning .hTtl + .t{
            width: 500px;
            margin: 0px auto;
        }
        main .team .hTtl{
            color: #c0b594;
            padding-bottom: 54px;
            margin-bottom: 21px;
        }
        main .team .hTtl + .t{
            color: #fff;
            padding-bottom: 40px;
        }
        main .works .hTtl{
            padding-top: 40px;
            margin-top: 24px;
        }

        main .tips .meaning{
            width: 830px;
            height: 930px;
            position: absolute;
            left: calc(50% - 415px);
            margin-top: -30px;
            text-align: center;
            z-index: 2;
        }
        main .tips .meaning:after{
            content: '';
            position: absolute;
            width: 900px;
            height: 900px;
            top: calc(50% - 450px);
            left: calc(50% - 450px);
            background: #fff;
            z-index: -1;
            transform: rotate(45deg);
        }
        main .tips .meaning>div,
        main .tips .meaning .flip>*{
            position: absolute;
            width: 100%;
            left: 0px;
        }
        main .tips .meaning .num{
            top: 40px;
        }
        main .tips .meaning .num p{
            font-size: 176px;
            font-weight: bold;
            line-height: 1;
            color: #e3e4e4;
            opacity: 0;
            transition: opacity .4s;
        }
        main .tips .meaning .num p.active{
            opacity: 1;
            transition-delay: .4s;
            transition-timing-function: linear;
        }
        main .tips .meaning .choose{
            width: 100%;
            top: 260px;
        }
        main .tips .meaning .choose::before,
        main .tips .meaning .choose::after{
            content: '';
            position: absolute;
            width: 20px;
            height: 100%;
            top: 0px;
            z-index: 3;
            background: #fff;
        }
        main .tips .meaning .choose::before{
            left: 0px;
        }
        main .tips .meaning .choose::after{
            right: 0px;
        }
        main .tips .meaning .choose .swiper-container{
            background: url(../img/about/dotted.jpg) repeat-x 0 14px;
        }
        main .tips .meaning .choose .swiper-slide{
            padding-bottom: 38px;
        }
        main .tips .meaning .choose .square{
            height: 32px;
        }
        main .tips .meaning .choose .square i{
            display: inline-block;
            vertical-align: top;
            margin-top: 5px;
            width: 22px;
            height: 22px;
            transform: rotate(45deg);
            position: relative;
            border: 2px solid transparent;
            transition: border .7s;
            cursor: pointer;
        }
        main .tips .meaning .choose .square.active i,
        main .tips .meaning .choose .square i:hover{
            border-color: #c0b594;
        }
        main .tips .meaning .choose .square i:before{
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            left: calc(50% - 4px);
            top: calc(50% - 4px);
            background: #c0b594;
            transition: background .7s;
        }
        main .tips .meaning .choose .square.active i:before,
        main .tips .meaning .choose .square i:hover:before{
            background: #000;
        }
        main .tips .meaning .choose .t{
            width: 100%;
            position: absolute;
            font-size: 12px;
            font-weight: bold;
            line-height: 28px;
            top: 32px;
            left: 0px;
            color: #c0b594;
            transition: transform .7s,color .7s;
        }
        main .tips .meaning .choose .square.active i + span,
        main .tips .meaning .choose .square i:hover + span{
            color: #000;
            transform: translateY(10px);
        }
        main .tips .meaning .slogan{
            top: 50%;
            margin-top: -60px;
        }
        main .tips .meaning .slogan .box{
            top: 0px;
            transition: transform .4s,opacity .4s;
            opacity: 0;
            transform: translateY(70px);
        }
        main .tips .meaning .slogan .box.active{
            opacity: 1;
            transform: translateY(0px);
            transition-delay: .4s;
            transition-timing-function: linear;
        }

        main .tips .meaning .btn{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            cursor: pointer;
            z-index: 2;
        }
        main .tips .meaning .btn:before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            opacity: 0;
            z-index: 2;
            transition: opacity .7s;
            pointer-events: none;
        }
        main .tips .meaning .btn:hover:before{
            opacity: 1;
        }
        main .tips .meaning .btn.prev{
            left: -100px;
            background: url(../img/common/arrows-white.png) 0px -153px;
        }
        main .tips .meaning .btn.prev:before{
            background: url(../img/common/arrows-white.png) 0px -102px;
        }
        main .tips .meaning .btn.next{
            right: -100px;
            background: url(../img/common/arrows-white.png) 0px 0px;
        }
        main .tips .meaning .btn.next:before{
            background: url(../img/common/arrows-white.png) 0px -51px;
        }
        


        main .team{
            position: relative;
            z-index: 2;
            margin-top: -1400px;
            padding-top: 1400px;
            padding-bottom: 55px;          
            background: #242831;                                                                                                     
            position: relative;
            margin-bottom: 60px;
        }
        main .team::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: url(../img/about/teamBg.png) center top / cover;
            z-index: -1;
        }
        
        main .team .content{
            padding-top: 112px;
            position: relative;
        }
        main .team .content:before{
            content: '';
            position: absolute;
            width: 576px;
            height: 576px;
            background: #c7bea0;
            left: calc(50% - 288px);
            transform: rotate(45deg);
            bottom: calc(100% + 62px);
            margin-bottom: 100px;
            opacity: 0;
            transition: margin-bottom .8s,opacity .8s;
        }
        main .team .content.frozen:before{
            opacity: 1;
            margin-bottom: 0px;
        }
        main .team .info{
            position: relative;
            color: #fff;
            width: 1250px;
            margin: 0 auto;
        }
        main .team .info .member{
            justify-content: space-between;
        }
        main .team .info .member .person{
            width: calc(50% - 1px);
            padding-top: 35px;
            padding-bottom: 90px;
        }
        main .team .info .member .person.left{
            text-align: right;
            padding-right: 36px;
        }
        main .team .info .member .person.right{
            padding-left: 36px;
        }
        main .team .info .member .person .avatar{
            width: 355px;
            height: 355px;
            display: inline-block;
            position: relative;
            z-index: 1;
        }   
        main .team .info .member .person .avatar.active{
            z-index: 3;
        }
        main .team .info .member .person .avatar,
        main .team .info .member .person .intro{
            transition: transform .8s,opacity .8s;
            opacity: 0;
        }
        main .team .info .member .person.left .avatar{
            margin-right: -29px;
            transform: translateX(-71px);
        }
        main .team .info .member .person.right .avatar{
            margin-left: -29px;
            transform: translateX(71px);
        }
        main .team .info .member .person .avatar .mid{
            position: absolute;
            width: 100%;
            height: 100%;
            clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
        }
        main .team .info .member .person .avatar .border{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        main .team .info .member .person .avatar .border.sm{
            width: calc(100% + 32px);
            height: calc(100% + 32px);
        }
        main .team .info .member .person .avatar .border.lg{
            opacity: .5;
            width: calc(100% + 70px);
            height: calc(100% + 70px);
        }
        main .team .info .member .person .avatar .border:before{
            content: '';
            position: absolute;
            width: calc(100% / 1.414213 - 4px);
            height: calc(100% / 1.414213 - 4px);
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%) rotate(45deg);
            border: #c0b594 solid 2px;
        }
        main .team .info .member .person .intro{
            margin-top: -50px;
            position: relative;
            z-index: 2;
        }
        main .team .info .member .person.left .intro{
            margin-right: 42%;
            transform: translateX(-30px);
        }
        main .team .info .member .person.right .intro{
            margin-left: 42%;
            transform: translateX(30px);
        }
        main .team .info .member .person .intro.frozen,
        main .team .info .member .person .avatar.frozen{
            opacity: 1;
            transform: translateX(0px);
        }
        main .team .info .member .person .intro .name{
            font-size: 20px;
            color: #c0b594;
            margin-bottom: 12px;
        }
        main .team .info .member .person .intro .postn{
            font-size: 14px;
            display: block;
        }
        main .team .info .member .person .intro .moreBox{
            display: inline-block;
        }
        main .team .more span{
            padding-right: 0px;
        }
        main .team .info .details{
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
            z-index: 2;
            pointer-events: none;
            position: absolute;
            flex-direction: row-reverse;
        }
        main .team .info .details.able{
            pointer-events: all;
        }
        main .team .info .details .box{
            width: 50%;
            overflow: hidden;
        }
        main .team .info .details .txt{
            width: 100%;
            height: 100%;
            position: relative;
            background: #20242a;
            padding: 68px 45px 48px 60px;
            transition: transform .8s;
            overflow-y: auto;
        }
        main .team .info .details .txt::-webkit-scrollbar{
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }
        main .team .info .details .txt::-webkit-scrollbar-thumb{
            background: #282f39;
            border-radius: 6px;
        }
    
        main .team .info .details .txt::-webkit-scrollbar-track{
            border-radius: 10px;
            background: transparent;
        }
        main .team .info .details .left .txt{
            border-right: #505252 solid 1px;
            transform: translateX(calc(1px - 100%));
        }
        main .team .info .details .right .txt{
            border-left: #505252 solid 1px;
            transform: translateX(calc(100% - 1px));
        }

        main .team .info .details .show .txt{
            transform: translateX(0px);
            border-color: transparent;
        }
        main .team .info .details .txt p{
            font-size: 16px;
            margin-top: 30px;
        }
        main .team .info .details .txt p:first-child{
            color: #c0b594;
            margin-top: 0px;
        }
        main .team .info .details .txt .closed{
            position: absolute;
            width: 20px;
            height: 20px;
            top: 24px;
            right: 24px;
            cursor: pointer;
        }
        main .team .info .details .txt .closed:before,
        main .team .info .details .txt .closed:after{
            content: '';
            position: absolute;
            width: 18px;
            height: 2px;
            background: #c0b594;
            top: calc(50% - 2px);
            left: calc(50% - 9px);
        }
        main .team .info .details .txt .closed:before{
            transform: rotate(45deg);
        }
        main .team .info .details .txt .closed:after{
            transform: rotate(-45deg);
        }

        
        
        main .works{
            padding-bottom: 100px;
        }
        main .works .inner{
            padding-top: 128px;
            background: url(../img/about/dots.png) no-repeat top center;
            margin-bottom: 100px;
            transform: translateY(-150px);
        }
        main .works .inner.frozen{
            transform: translateY(0px);
        }
        main .works .inner:before{
            content: '';
            position: absolute;
            top: 0px;
        }
        main .works .list{
            overflow: hidden;
            width: 1250px;
            margin: 0px auto;
        }
        main .works .list .item{
            float: left;
            display: block;
            position: relative;
            padding-bottom: 56px;
            opacity: 0;
            transition: transform .8s,opacity .8s;
        }
        main .works .list .item:nth-child(1){
            width: 43.5%;
            margin-right: 2.5%;
            margin-top: 84px;
            transform: translate(-50px,0px);
        }
        main .works .list .item:nth-child(2){
            width: 54%;
            margin-bottom: 105px;
            transform: translate(50px,0px);
        }
        main .works .list .item:nth-child(3){
            width: 34%;
            transform: translate(0px,50px);
        }
        main .works .list .item.frozen{
            opacity: 1;
            transform: translate(0px,0px) !important;
        }
        main .works .list .item:after{
            content: '';
            opacity: 0;
            position: absolute;
            z-index: 2;
            width: 100%;
            height: calc(100% - 56px);
            top: 0px;
            left: 0px;
            background: #20242a;
            transition: opacity .7s;
        }
        main .works .list .item:hover:after{
            opacity: .3;
        }
        main .works .list .item img{
            width: 100%;
            height: auto;
            display: block;
        }
        main .works .list .item .txt{
            z-index: 3;
            position: absolute;
            left: 48px;
            top: 0px;
            right: 0px;
            margin: auto;
            transition: height .7s;
            height: 100%;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-end;
        }
        main .works .list .item:hover .txt{
            height: calc(100% - 96px);
        }
        main .works .list .item .txt .name{
            font-size: 54px;
            font-weight: bold;
            color: #fff;
            line-height: 1;
        }
        
        main .works .list .item:hover .more span{
            color: #c7bea0;
        }




        @media(max-width:1800px){
            main .tips .art .content{
                min-height: 400px;
            }
        }
        @media(max-width:1700px){
            main .tips .art .content{
                min-height: 380px;
            }
        }
        @media(max-width:1640px){
            main .headPic{
                width: 100%;
                padding-left: 20px;
                padding-right: 20px;
            }
        }

        @media(max-width:1600px){
            main .headPic .t{
                font-size: 64px;
            }
            main .headPic .shadow .arrow{
                width: 260px;
                height: 260px;
                transform-origin: 240px 240px;
                transform: translate(20px,20px) rotate(45deg);
            }
            main .hTtl{
                font-size: 42px;
            }
            main .tips .art .content{
                min-height: 320px;
                padding-bottom: 320px;
            }
            main .tips .art .hTtl{
                font-size: 36px;
            }
            main .hTtl + .t{
                font-size: 16px;
            }
            main .tips .meaning .num p{
                font-size: 157px;
            }
            main .team .info .details .txt p{
                font-size: 14px;
            }
            main .works .list .item .txt .name{
                font-size: 46px;
            }
        }
        @media(max-width:1350px){
            main .team .info,
            main .works .list{
                width: 100%;
                padding: 0px 50px;
            }
            main .team .info .details{
                width: calc(100% - 100px);
                left: 50px;
            }
        }
        @media(max-width:1200px){
            main .headPic .t{
                font-size: 46px;
            }
            main .headPic .shadow .arrow{
                width: 200px;
                height: 200px;
                transform-origin: 185px 185px;
                transform: translate(15px,15px) rotate(45deg);
            }
            main .headPic .shadow .arrow span:first-child{
                height: 15px;
            }
            main .headPic .shadow .arrow span:last-child{
                width: 15px;
            }
            main .hTtl{
                font-size: 36px;
            }
            main .tips .art .hTtl{
                font-size: 32px;
            }
            main .hTtl + .t{
                font-size: 14px;
            }
            main .team .info .member .person .intro{
                margin-top: -20px;
            }
            main .team .info .member .person .intro .name{
                font-size: 18px;
            }
            main .team .content:before{
                bottom: calc(100% + 82px);
            }
        }

        @media(max-width:1024px){
            main .headPic .t{
                font-size: 42px;
            }
            main .headPic .shadow .arrow{
                width: 16vw;
                height: 16vw;
                transform-origin: calc(100% - 10px) calc(100% - 10px);
                transform: translate(10px,10px) rotate(45deg);
            }
            main .headPic .shadow .arrow span:first-child{
                height: 10px;
            }
            main .headPic .shadow .arrow span:last-child{
                width: 10px;
            }
            main .tips{
                padding-bottom: 142vw;
            }
            main .tips .art .content{
                padding-top: 240px;
            }
            main .tips .meaning .btn.prev{
                left: 0px;
            }
            main .tips .meaning .btn.next{
                right: 0px;
            }

            main .tips .meaning .choose{
                width: 700px;
                left: 50%;
                transform: translateX(-50%);
            }
            main .tips .meaning:after{
                width: 120vw;
                height: 120vw;
                top: calc(50% - 60vw);
                left: calc(50% - 60vw);
            }
            main .tips .meaning .num{
                top: 2%;
            }
            main .tips .meaning .choose{
                top: 22%;
                width: 80%;
            }
            main .tips .meaning .num p{
                font-size: 130px;
            }
            main .tips .meaning .hTtl + .t{
                width: 450px;
            }
            main .team .info .member .person .avatar{
                width: 300px;
                height: 300px;
            }
            main .team .info .member .person .intro{
                margin-top: 30px;
            }
            main .team .info .member .person .intro .name{
                font-size: 16px;
            }
            main .works{
                padding-bottom: 70px;
            }
            main .works .list .item .txt .name{
                font-size: 36px;
            }
        }
        @media(max-width:870px){
            main .tips .meaning{
                width: calc(100% - 40px);
                left: 20px;
                height: 0px;
                padding-bottom: 112%;
            }
        }
        @media(min-width:768px){
            main .headPic .pic img{
                height: auto;
                object-fit: initial;
            }
        }
        @media(max-width:767px){
            main .headPic .t{
                font-size: 24px;
                padding:  0px 20px;
            }
            main .headPic .shadow .arrow{
                width: 100px;
                height: 100px;
                transform-origin: calc(100% - 7px) calc(100% - 7px);
                transform: translate(7px,7px) rotate(45deg);
            }
            main .headPic .shadow .arrow span:first-child{
                height: 7px;
            }
            main .headPic .shadow .arrow span:last-child{
                width: 7px;
            }
            main .tips .art .content .inner{
                max-width: 100%;
                padding: 0px 4%;
            }
            main .tips .art .hTtl{
                font-size: 24px;
            }
            main .tips .meaning .choose::before, 
            main .tips .meaning .choose::after{
                display: none;
            }
            main .hTtl{
                font-size: 30px;
            }
            main .hTtl + .t{
                font-size: 12px;
            }
            main .tips{
                padding-bottom: 900px;
            }
            main .tips .meaning{
                height: 800px;
                padding-bottom: 0px;
                margin-top: -100px;
            }
            main .tips .meaning .hTtl + .t{
                width: 100%;
            }
            main .tips .art .content{
                min-height: 240px;
                padding-bottom: 240px;
            }
            main .tips .meaning .btn{
                display: none;
            }
            main .tips .meaning .num{
                top: 150px;
            }
            main .tips .meaning .choose{
                width: 100%;
                top: 320px;
            }
            main .tips .meaning .slogan{
                top: 420px;
                margin-top: 0px;
            }
            main .tips .meaning:after{
                width: 800px;
                height: 800px;
                top: calc(50% - 400px);
                left: calc(50% - 400px);
            }
            main .tips .meaning .hTtl + .t,
            main .team .info, 
            main .works .list{
                padding: 0 4%;
            }
            main .team .info .member{
                flex-direction: column;
            }
            main .team .info .details{
                flex-direction: column-reverse;
            }
            main .team .info .member .person{
                width: 100%;
                text-align: center !important;
                padding: 35px 0px 0px !important;
            }
            main .team .info .member .person .intro{
                margin: 71px 0px 0px !important;
            }
            main .team .info .member .person .avatar{
                margin: 0px !important;
                width: 220px;
                height: 220px;
            }
            main .team .info .member .person .intro, 
            main .team .info .member .person .avatar{
                opacity: 1 !important;
                transform: translateX(0px) !important;
            }
            main .team .info .details .box{
                width: 100%;
                height: 50%;
            }
            main .team .info .details .txt{
                border-width: 0px !important;
            }
            main .team .info .details .left .txt{
                transform: translateY(100%);
            }
            main .team .info .details .right .txt{
                transform: translateY(100%);
            }
            main .team .info .details .show .txt{
                transform: translateY(0px);
            }
            main .works{
                padding-bottom: 40px;
            }
            main .works .list .item{
                width: 100% !important;
                max-width: 490px;
                float: initial;
                margin: 0px auto 44px auto !important;
            }
            main .works .list .item .txt{
                left: 12px;
            }
            main .works .list .item .txt .name{
                font-size: 32px;
            }
        }
        @media(max-width:480px){
            main .headPic{
                padding: 0px;
                padding-bottom: calc(100vw - 255px);
            }
            main .headPic .pic{
                height: 270px;
            }
            main .headPic .shadow{
                width: 200%;
                left: -50%;
                padding-bottom: 100%;
            }
        }